<!-- 开关小按钮radio -->
<template>
    <div class="radioBtn">
        <img src="@/assets/images/newIndex/6.png" class="img1" v-if="checked" @click.stop="radioBtnChange" />
        <img src="@/assets/images/newIndex/7.png" class="img2" v-if="!checked" @click.stop="radioBtnChange" />
    </div>
</template>

<script>
export default {
    props: ['defaultCheck'],
    name: 'radioBtn',
    data() {
        return {
            checked: false
        }
    },
    mounted() {
        this.checked = this.defaultCheck
    },
    methods: {
        radioBtnChange() {
            this.checked = !this.checked
            this.$emit('onChange', this.checked)
        }
    }
}
</script>
<style lang="scss" scoped>
.radioBtn {
    display: inline-block;
    margin: 0;
    padding: 0;
    height: 30px;
    width: 55px;
    background: url('@/assets/images/newIndex/5.png') no-repeat top left;
    background-size: 100%;
    overflow: hidden;
    position: relative;
    img {
        height: 30px;
        width: 30px;
        cursor: pointer;
    }
    .img1 {
        float: right;
    }
    .img2 {
        float: left;
    }
}
</style>